<template>
  <div class="demo">
    <div class="demo__side">
      <div class="ctfo-title">勤务类型</div>

      <el-radio-group class="demo__group" v-model="duty">
        <el-radio-button label="outer">外勤</el-radio-button>
        <el-radio-button label="inner">内勤</el-radio-button>
      </el-radio-group>

      <el-tree
        :data="data"
        show-checkbox
        node-key="id"
        :default-expanded-keys="[2, 3]"
        :default-checked-keys="[5]"
        :props="defaultProps">
      </el-tree>
      <div class="ctfo-title">标签</div>
      <div class="ctfo-tag-area">
        <el-tag>primary</el-tag>
        <el-tag type="danger">danger</el-tag>
        <el-tag type="success">success</el-tag>
        <el-tag type="info">info</el-tag>
        <el-tag type="warning">warning</el-tag>
        <el-tag type="primary" effect="plain">primary plain</el-tag>
        <el-tag type="danger" effect="plain">danger plain</el-tag>
        <el-tag type="success" effect="plain">success plain</el-tag>
        <el-tag type="info" effect="plain">info plain</el-tag>
        <el-tag type="warning" effect="plain">warning plain</el-tag>
        <el-tag type="primary" effect="dark">primary dark</el-tag>
        <el-tag type="danger" effect="dark">danger dark</el-tag>
        <el-tag type="success" effect="dark">success dark</el-tag>
        <el-tag type="info" effect="dark">info dark</el-tag>
        <el-tag type="warning" effect="dark">warning dark</el-tag>
      </div>
    </div>

    <div class="demo__content">
      <div class="ctfo-title">查询条件</div>

      <div class="demo__search">
        <el-form inline>
          <el-form-item label="值班方案">
            <el-input disabled placeholder="请输入" v-model="filter.project"></el-input>
          </el-form-item>

          <el-form-item label="统计时间">
            <el-date-picker type="daterange" v-model="filter.time"></el-date-picker>
          </el-form-item>
          <el-form-item label="派单来源" v-model="filter.origin">
            <el-select v-model="filter.resource">
              <el-option v-for="i in 5" :label="i" :value="i" :key="i.toString()"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="勤务按钮">
            <el-checkbox-group v-model="filter.check">
              <el-checkbox label="1">按钮1</el-checkbox>
              <el-checkbox label="2">按钮2</el-checkbox>
            </el-checkbox-group>
          </el-form-item>

          <el-form-item label="是否">
            <el-switch v-model="filter.switch" active-text="按月付费" inactive-text="按年付费"></el-switch>
          </el-form-item>

          <el-form-item label="数字">
            <el-input-number v-model="filter.num"></el-input-number>
          </el-form-item>

          <el-form-item>
            <el-button type="primary">统计分析</el-button>
            <el-button>重置</el-button>
          </el-form-item>
        </el-form>

        <el-tabs>
          <el-tab-pane label="用户管理">
            <el-table :data="dataSource" border height="calc(100vh - 320px)">
              <el-table-column v-for="h in header" v-bind="h" :key="h.prop"></el-table-column>
              <el-table-column label="标签">
                <template slot-scope="scope">
                  <el-tag :type="type[scope.$index % 6]">标签</el-tag>
                </template>
              </el-table-column>

              <el-table-column label="操作">
                <el-link @click="dialogShow = true">详情</el-link>
                <el-link type="danger">删除</el-link>
                <el-link type="primary">编辑</el-link>
                <el-link type="warning">警告</el-link>
                <el-link type="info">info</el-link>
                <el-link type="success">success</el-link>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="配置管理"></el-tab-pane>
        </el-tabs>

        <el-pagination
          class="ctfo-center"
          background
          :current-page="currentPage"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        ></el-pagination>
      </div>
    </div>

    <el-dialog :visible.sync="dialogShow" title="提示">
      <span>这是一段信息</span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ThemeShow',
  data() {
    return {
      type: ['primary', 'success', 'warning', 'danger', 'info'],
      duty: 'outer',
      data: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      filter: { time: null, project: null, origin: null, check: [] },
      header: [
        { label: '序号', prop: 'index' },
        { label: '名称', prop: 'label' },
        { label: '勤务类型', prop: 'type' },
        { label: '时间', prop: 'time' },
      ],
      dataSource:  Array.from(new Array(50)).map((_, index) =>( {
        index,
        label: `名称${index}`,
        type: '日常勤务',
        time: '2021-03-15 22:00:00',
      })),
      currentPage: 2,
      dialogShow: false
    }
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.demo {
  display: flex;
  align-items: stretch;

  &__side {
    width: 400px;
    margin-right: 20px;

    background: var(--color-content-bg);
  }

  &__search,
  &__group {
    margin: 10px 0;
  }

  &__content {
    flex: 1;

    background: var(--color-content-bg);
  }
}

.ctfo-tag-area {
  padding-top: 5px;
  /deep/ .el-tag {
    margin: 0 5px 5px 0;
  }
}
</style>
